<template>
    <div>
        
        <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            :data="tableDataFn"
            :header-cell-style="{
          background:'#E0E0E0'
        }"
            stripe
            :fit="true"
            style="width: 100%">
             <el-table-column
      type="index" width="50" label="序号">
    </el-table-column>
            <template v-for="(item) in tableColumns">
            <el-table-column 
                :prop="item.prop" 
                :label="item.label"
                 :sortable="item.sortable"   
                :width="item.width"
                align="center"
                v-if="item.isShow"
                :key="item.prop">
                <template v-slot="scope">
                    <template v-if="item.format == 'progress'">
                        <el-progress
                            :percentage="Number(calcCheng(scope.row[item.prop], 100).toFixed(1))" 
                            :color="TalallColorMethod(scope.row)">
                        </el-progress> 
                    </template>
                    <template v-else-if="item.format == 'MB'">
                        <div>
                            {{ scope.row[item.prop] ? scope.row[item.prop] + '&nbsp;MB' : scope.row[item.prop] }}
                        </div>
                    </template>
                    <template v-else>
                        <div>
                            {{ scope.row[item.prop] }}
                        </div>
                    </template>
                </template>
            </el-table-column>
            </template>
        </el-table>
        <v-pagination
            :dataTotal="postData.dataTotal" 
            :curPage="postData.curPage" 
            :pageSize="postData.pageSize" 
            @getCurPage="getPaginationCurPage"
            @getPageSize="getPaginationPageSize">
        </v-pagination>
    </div>
</template>

<script>
import { getMysqlTableSize } from '@/api/index.js'
import vPagination from 'itemMonitorCom/Pagination.vue';
import tableColumns from './sqlTableSpaceTableColumns.js';
import bus from 'common/bus.js';
import { GetItem } from "@/utils/dataStore";
export default {
    name: 'sqlTableSpace',
    components: {
        vPagination
    },
    data() {
        return {
            postData: {
              
                curPage: 1,
               pageSize: 5,
               dataTotal:0
            },
            tableData: [],
           
            tableColumns: tableColumns,
            SearchIPArr: [],
            searchJson: {},
            SearchIP: '',
            timerName: 'MonitorInfoMysqlTableSpace',
            timerEventName: 'timerMonitorInfoMysqlTableSpace',
            timerInterval: 1000 * 60*5,
            loading: true,
            Ioitem: {
        IP: "",
        DATANAME: "",
      },
      selectedMonID:''
        }
    },
    created() {
    GetItem(sessionStorage.getItem('PushId')).then(_ => {
      this.selectedMonID =_[0].articleAddress;
      this.getTableData();
    })
    this.getToolBarSearchIP(this.selectedMonID.IP);

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        this.getTableData();
      this.getToolBarSearchIP(this.selectedMonID.IP);
      }
    });
  },
  mounted() {
    bus.$on("ItemMonitorMysql", (msg) => {
      this.resetData();
      this.selectedMonID = msg;
      
      this.getTableData();
      this.getToolBarSearchIP(this.selectedMonID.IP);
    });
  },
    computed: {
        postDataFn() {
            return {
                postData: JSON.stringify(this.postData)
            }
        },
        // timerInterval(){
        //     return Number(this.$store.state.pageRefresh)*1000
        // },
        tableDataFn() {
      return this.tableData;
    },
    },
    //计算函数未导入
    methods: {
        TalallColorMethod(row) {
            let _color = '#67c23a';
            switch (row.ALERT_LEVEL) {
                case 3:
                    _color = '#f56c6c';
                    break;
                case 2:
                    _color = '#e6a23c';
                    break;
            
                default:
                    break;
            }

            return _color;
        },
       getTableData() {
      this.loading = true;
      this.tableData = [];

      getMysqlTableSize().then((res) => {
        // 处理后台返回的数据  无奈
        let itemKey = Object.keys(res);
        let itemValue = Object.values(res);
        let itemBox=[]
        // console.log(itemKey,itemValue)

        itemKey.forEach((item, index) => {
          let itemIp = item.split(",")[0].split("[")[1];
          let iteminstance = item.split(",")[1].split("]")[0];

          if (itemValue[index].length > 0) {
            itemValue[index].forEach((valueItem, valueIndex) => {
              valueItem["IP"] = itemIp;
              valueItem["DATANAME"] = iteminstance;
              itemBox.push(valueItem);
            });
          } else {
            this.Ioitem.IP = itemIp;
            this.Ioitem.DATANAME = iteminstance;
            itemBox.push(this.Ioitem);
          }
        });

        itemBox = itemBox.filter((item) => {
        
          
        
        
          return item.IP==this.selectedMonID.IP;
        
      });
        //分页
        this.postData.dataTotal=itemBox.length
        this.$store.commit('MysqlTableSpace/setItem',itemBox)
        this.$store.commit("MysqlTableSpace/pagination",this.postData );
        this.tableData= this.$store.getters["MysqlTableSpace/getItem"]
        // this.tableData=itemBox

        // this.dataTotal = this.tableData.length;
        // this.tableData = res.data;

        this.loading = false;
      });
    },
        getPaginationCurPage(val) {
            this.postData.curPage = val;
            this.getTableData();
        },
        getPaginationPageSize(val) {
            // 分页大小改变之后，重置当前页码为 1
            this.postData.curPage = 1;
            this.postData.pageSize = val;

            this.getTableData();
        },
        getToolBarSearchIPArr(arr) {
            // 获取搜索IP关键字
            this.SearchIPArr = arr;

            this.postData.curPage = 1;
            if (this.SearchIPArr.length > 0) {
                this.postData.filters = {
                    ip: this.SearchIPArr
                };
            } else {
                this.postData.filters = {};
            }

            this.getTableData();
        },
        async getToolBarSearchIP(str){
            // 获取搜索IP关键字
            this.SearchIP = str;
            this.postData.curPage = 1;
           await this.$store.commit("MysqlTableSpace/SearchItem",this.SearchIP );
            await this.$store.commit("MysqlTableSpace/pagination",this.postData );
           this.tableData=await this.$store.getters["MysqlTableSpace/getSearchItem"]
           this.postData.dataTotal=this.tableData.length
        },
        getChangeLie(val) {
            // 遍历表格列
            this.tableColumns.map((item, index) => {
                // 列的显示隐藏状态改变
                item.isShow = val.includes(item.label);
            });
        },
        resetData(){
            this.dataTotal = 0;
                this.tableData = [];

        }
    },
    watch: {
        
    },
    beforeDestroy() {
        // 页面关闭前，移除定时器任务
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
}
</script>

<style scoped>
    .el-table .warning-row {
    background: oldlace;
  }
    .el-table .success-row {
    background: #f0f9eb;
  }
</style>